昨天講解了 Stroop Effect 是什麼、以及實驗設計。今天來說說程式面的東西。不過今天講的東西可能對於還不懂前端開發的人可能不好懂，所以看不懂的話請隨意跳過去。

網站架構

在好幾天前曾經提過（第 13 天）：網站由三個主要成分構成：網頁前端、後端、以及資料庫。而這次的實驗網站我想要的功能有

• 受試者在網頁前端上，可以輸入代號、以及做實驗得到結果
• 主試者可以透過後端程式，從資料庫中得到受試者做的實驗資料
• 主試者可以拿實驗資料，去跑統計得到結果

在前端部分，實驗處理當然用到了 jsPsych 這個套件。並使用了 axios 這個套件，將受試者做完實驗的資料給送到後端。Vue 跟 Nuxt 則是前端框架的套件，節省開發的時間。

在後端部分，Express.js 是一種後端框架，我透過它來接收受試者做完實驗後，從前端傳來的資料。Mongoose 則是後端跟資料庫溝通的中間套件，讓後端能輕易地從資料庫拿資料、或是將資料存進資料庫。

資料庫部分，MongoDB 是一種資料庫的類型，從前端得到的資料最終會存放在這裡。統計部分，Colab 是一種線上程式筆記本，有支援很多種程式語言，像是 Python。Python 是一種很常被用來跑統計的程式語言。Colab 可以從後端拿到處理過的資料，並跑出我需要的描述統計與推論統計結果。

程式碼在這：

• https://github.com/ayugioh2003/psycho-test/tree/main/packages/nuxt

實驗程式邏輯

基本上這個 Stroop Effect 的程式邏輯，跟前幾天的 Demo Simple Reaction Time Task 的架構類似。timeline 有 歡迎詞 → 指導語 → 練習階段 -> 正式階段 -> 結束語 ，比 Demo Task 多了一個正式階段。前端的實驗邏輯程式碼在這裡：

• https://github.com/ayugioh2003/psycho-test/blob/main/packages/nuxt/pages/9-StroopEffect.vue

後端除了從前端取得受試者的資料外，也讓 Colab 可以從後端這裡拿到整理過後的乾淨資料。後端程式的主要邏輯在這裡：

• https://github.com/ayugioh2003/psycho-test/blob/main/packages/nuxt/sub-system/express/router/experiment.ts

統計部分，基本上我是拿著以前的統計課本，然後邊 google、邊詢問 ChatGPT 要怎麼寫出 Python 對應的程式碼。主要就跑了描述統計、多因子變異數分析、跟事後比較。統計部分的程式碼在這裡：

• https://colab.research.google.com/drive/19H1IUJ2vCoarNAGTc1w35xvV1odn3hWO

小結

今天大概講了 Stroop Effect 的網站架構是怎麼設計的，以及實作邏輯大概做了什麼事情。明天來談談這個實驗結果如何、以及該怎麼解釋。